body{margin:0px auto;padding:0;background:#333;font:18px/18px arial;color:#fff;text-align:center }
#backtop{width:28px;height:28px;background:#2480C5;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
#backtop:before{content:url(icon32/backtotop.png);}

.header-1,.header-2,.header-3,.header-title-content{border:1px solid #fff;}
.header-wrapper{width:100%;background:#333;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.header-inner{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.header-content{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.header-1,.header-2,.header-3{overflow:hidden;position:relative;float:left;margin: 10px auto;}
.header-1{height:90px;}.header-2,.header-3{height:auto;margin-top:50px;}
.header-1{width:33%;}.header-2{width:28%;}.header-3{width:38%;}
.header-title-content{width:66%;height:30px;overflow:hidden;position:absolute;right:0;top:10px;}		
.header-title-content:before{content:'Temui atau hubungi kami di sini untuk respon lebih cepat 24 jam kami Online';font:14px/16px arial; }

.h-phone,.h-maps{width:32px;height:32px;padding:5px;border:3px solid #fff;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.header-2 .h-phone:before{content:url(icon32/phone.png);}
.h-phone:after{content:'085 850 675 552';position:absolute;left:55px;}

.header-3 .h-maps:before{content:url(icon32/map32.png);}
.header-3-small{width:85%;position:absolute;bottom:0;right:0;display:inline-table;} 
.hp-small,.home-small {width:100%;height:18px;float: left;}
.hp-small:before{content:url(icon32/hp16.png);float: left;}
.home-small:before{content:url(icon32/home16.png);float: left;}
.hp-small:after{content:'085 850 675 552';float: left;font:12px/14px arial}
.home-small:after{content:'JL Merdeka No 20 Surabaya';float: left;font:12px/14px arial}
/* START POS */
.post-1,.post-2,.post-3,.post-content{border:1px solid #fff;}
.bulat-1,.bulat-2,.bulat-3{border:1px solid #ff0000;}
.post-wrapper{width:100%;background:#333;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.post-inner{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.post-content{width:95%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.post-1,.post-2,.post-3{width:33.1%;height:300px;margin:20px auto;overflow:hidden;position:relative;float:left}

.post-inner-top{width:100%;background:#fff;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.post-top-1{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.top-1{width:100%;background:#333;position:absolute;top:0;z-index:1;}
.top-2{width:100%;position:absolute;top:155px;overflow:hidden;}


.post-top-1{min-height:620px;max-height:1715px;height:auto;}
.top-1{height:290px;}
.top-2-content-1,.top-2-content-2,.top-2-content-3{height:475px;}
.top-2-content-1,.top-2-content-2,.top-2-content-3{width:33%;position:relative;float:left;margin:0px auto;z-index:1;}

.bulat{width:206px;height:206px;background:#333;border-radius:50%;border:10px solid #F0EFEF;float:left;margin:0 40px}
/* START FOOTER */
.footer-wrapper{width:100%;background:#333;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.footer-inner{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.footer-content{width:100%;overflow:hidden;position:relative;margin:0px auto;padding:0;}
.footer-1,.footer-2,.footer-3{width:33.333%;height:auto;margin:10px auto;overflow:hidden;position:relative;float:left}

.f-title{background:rgba(33, 148, 233, 0.8);line-height:30px}
.f-title,.f-maps,.f-phone,.f-email,.f-bb,.f-whatsapp{width:100%;height:32px;margin:5px auto}
.f-title:before,.f-maps:before,.f-phone:before,.f-email:before,.f-hp:before,.f-bb:before,.f-whatsapp:before{position:absolute;left:10px}
.f-phone:after{float: left;margin: 5px 50px;}
.footer-1 .f-title:before{content:'Office';}
.f-maps:before{content:url(icon32/map32.png);}
.f-phone:before{content:url(icon32/phone.png);}
.f-email:before{content:url(icon32/email32.png);}
.f-phone:after{content:'Jl Semanggi Surabaya';font:12px/14px arial}
.footer-2 .f-title:before{content:'Contact Sales';}
.f-hp{width:100%;height:40px;}
.f-hp:before{content:url(icon32/hp32.png);}
.f-bb:before{content:url(icon32/bb32.png);}
.f-whatsapp:before{content:url(icon32/whatsapp32.png);}
.footer-3 .f-title:before{content:'About Us';}

.footer-credit{width:100%;margin:0px auto;padding:0;background:#171B1E;overflow:hidden;position:relative;}
.f-media{width:50%;height:40px;float:left;overflow:hidden;}
.f-credit{width:50%;height:40px;float:left;}

.f-media ul {margin:0;padding:0;}
.f-media ul li{list-style:none;} 
.f-media ul li a{width:40px;height:40px;float:left;border-right:1px solid #333}
.f-facebook,.f-twitter,.f-rss{}


.f-facebook:before{content:url(icon32/facebook.png);}
.f-twitter:before{content:url(icon32/twitter.png);}
.f-google-plus:before{content:url(icon32/google-plus.png);}
.f-rss:before{content:url(icon32/rss.png);}
.f-you-tube:before{content:url(icon32/you-tube.png);}
.f-facebook:hover{background:#3C599B;display:block;}
.f-twitter:hover{background:#5EAADE;display:block;}
.f-google-plus:hover{background:#B23022;display:block;}
.f-rss:hover{background:#F47E24;display:block;}
.f-you-tube:hover{background:#DE2C28;display:block;}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 980px){
.top-2-content-1,.top-2-content-2,.top-2-content-3{width:100%;}.bulat {margin:0% 35%;}
.post-top-1{min-height:1715px;}
.post-1, .post-2, .post-3 {width:99%}
}
@media screen and (max-width: 768px){
.header-1{width:98%;margin:0px;}.header-title-content{display:none}
.header-2,.header-3{width:49%;margin:0px;}
.footer-1,.footer-2,.footer-3{width:98%;margin:0px;}
.f-media,.f-credit{width:98%;}
}
@media screen and (max-width: 667px){
.header-1,.header-2,.header-3{width:98%;margin:0px;}.header-title-content{display:none}
.footer-1,.footer-2,.footer-3{width:98%;margin:0px;}

}
@media screen and (max-width: 600px){

}
@media screen and (max-width: 568px){
}
@media screen and (max-width: 480px){

}
@media screen and (max-width: 384px){
.bulat {margin:0% 20%;}
}
@media screen and (max-width: 320px){
.bulat {margin:0% 15%}
}
@media screen and (max-width: 240px){
.bulat {margin:0% 3%;}
}